<template>
  <NForm ref="ruleForm" :model="queryForm" :rules="rules">
    <n-grid x-gap="12" :cols="2">
      <n-gi>
        <NFormItem label="网盘链接" path="netdisk">
          <NInput v-model:value="queryForm.netdisk" placeholder="请输入" />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="提取码" path="extracted_code">
          <NInput
            v-model:value="queryForm.extracted_code"
            placeholder="请输入"
          />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="解压码" path="jiangkuaihe">
          <NInput v-model:value="queryForm.jiangkuaihe" placeholder="请输入" />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="压缩包大小" path="zipSize">
          <NInput v-model:value="queryForm.zipSize" placeholder="请输入" />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="图片数量" path="photo_count">
          <NInputNumber
            class="w-full"
            v-model:value="queryForm.photo_count"
            placeholder="请输入"
          />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="视频数量" path="video_count">
          <NInputNumber
            class="w-full"
            v-model:value="queryForm.video_count"
            placeholder="请输入"
          />
        </NFormItem>
      </n-gi>
    </n-grid>
  </NForm>
</template>
<script setup lang="ts">
import {
  FormRules,
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NGrid,
  NGi,
  FormInst
} from 'naive-ui'
import { ref } from 'vue'
interface queryFormState {
  netdisk: string
  extracted_code: string
  jiangkuaihe: string
  zipSize: string
  photo_count: number | undefined
  video_count: number | undefined
}
const queryForm = ref<queryFormState>({
  netdisk: '',
  extracted_code: '',
  jiangkuaihe: 'xiaobaiquan',
  zipSize: '',
  photo_count: undefined,
  video_count: 0
})
const ruleForm = ref<FormInst | null>(null)

const validate = () => {
  return new Promise((rel: any) => {
    ruleForm.value?.validate((errors: any) => {
      console.log(errors)
      if (errors) {
        rel({
          valid: false,
          arr: errors,
          name: '网盘信息',
          form: queryForm.value
        })
      } else {
        rel({
          valid: true,
          arr: [],
          name: '网盘信息',
          form: queryForm.value
        })
      }
    })
  })
}
const resetFields = () => {
  ruleForm.value?.restoreValidation()
}
const setValue = (newInfo: any) => {
  const keys = Object.keys(queryForm.value)
  for (const key in newInfo) {
    if (keys.includes(key)) {
      queryForm.value[key] = newInfo[key]
    }
  }
}

defineExpose({
  validate,
  resetFields,
  setValue
})

const rules: FormRules = {
  // netdisk: [
  //   {
  //     required: true,
  //     message: '网盘链接不能为空',
  //     trigger: 'blur'
  //   }
  // ],
  extracted_code: [
    {
      required: true,
      message: '提取码不能为为空',
      trigger: 'blur'
    }
  ],
  jiangkuaihe: [
    {
      required: true,
      message: '解压码不能为为空',
      trigger: 'blur'
    }
  ]
  // zipSize: [
  //   {
  //     required: true,
  //     message: '压缩包大小不能为为空',
  //     trigger: 'blur'
  //   }
  // ],
  // photo_count: [
  //   {
  //     type: 'number',
  //     required: true,
  //     message: '图片数量',
  //     trigger: 'blur'
  //   }
  // ],
  // video_count: [
  //   {
  //     type: 'number',
  //     required: true,
  //     message: '视频数量',
  //     trigger: 'blur'
  //   }
  // ]
}
</script>

<style scoped lang="scss"></style>
